<template>
  <div id="body-profile">
    <van-nav-bar title="个人中心" />

    <div class="profile" @click="openUserInfoPage">
      <img :src="headImg" alt="" />
      <span>{{ nickName }}</span>
    </div>
    <!-- <van-divider :style="{ padding: '0 16px' }" /> -->
    <div class="options">
      <van-grid class="options-item" :column-num="5" :border="false">
        <van-grid-item
          :badge="allorderListL"
          icon="notes-o"
          @click="openOrderPage(0)"
          text="全部"
        />
        <van-grid-item
          :badge="waitPayListL"
          icon="ecard-pay"
          @click="openOrderPage(1)"
          text="待付款"
        />
        <van-grid-item
          icon="send-gift-o"
          :badge="waitSendListL"
          @click="openOrderPage(2)"
          text="待发货"
        />
        <van-grid-item
          icon="logistics"
          :badge="waitTakeGoodsL"
          @click="openOrderPage(3)"
          text="待收货"
        />
        <van-grid-item
          icon="other-pay"
          :badge="waitEvalL"
          @click="openOrderPage(4)"
          text="待评价"
        />
      </van-grid>
    </div>
    <van-cell-group class="operation-list">
      <van-cell title="我的收藏" @click="openCollect" icon="like-o" is-link />
      <van-cell title="收货地址" @click="openAddress" icon="home-o" is-link />
      <van-cell
        title="浏览记录"
        @touchend.native="openHistory"
        icon="clock-o"
        is-link
      />
    </van-cell-group>
  </div>
</template>

<script>
import {
  NavBar,
  Divider,
  Grid,
  GridItem,
  Button,
  Notify,
  Cell,
  CellGroup,
} from "vant";
import { logout, getUserInfo, orderList } from "@/network/index.js";
import checkUserInfo from "@/utils/checkUserInfo.js";
export default {
  name: "Profile",
  data() {
    return {
      headImg: "",
      nickName: "",
      AllorderList: [], //全部订单
      waitPayList: [], //待支付订单
      waitSendList: [], //待发货订单
      waitTakeGoods: [], //待收货订单
      waitEval: [], //待评价订单
    };
  },
  computed: {
    allorderListL() {
      return this.AllorderList.length ? this.AllorderList.length : null
    },
    waitPayListL() {
      return this.waitPayList.length ? this.waitPayList.length : null
    },
    waitSendListL() {
      return this.waitSendList.length ? this.waitSendList.length : null
    },
    waitTakeGoodsL() {
      return this.waitTakeGoods.length ? this.waitTakeGoods.length : null
    },
    waitEvalL() {
      return this.waitEval.length ? this.waitEval.length : null
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Divider.name]: Divider,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Notify.Component.name]: Notify.Component,
  },
  methods: {
    async outLogin() {
      const { data } = await logout();
      if (data.errmsg === "成功" && data.errno === 0) {
        this.$store.commit("setUserInfo", null);
        this.$store.commit("saveUserId", {
          username: "",
          password: "",
        });
        this.$router.push({ name: "Home" });
        Notify({ type: "success", message: "退出成功" });
      } else if (data.errno === 501) {
        this.$store.commit("setUserInfo", null);
      }
    },
    openOrderPage(index) {
      this.$router.push({ name: "OrderList", query: { index } });
    },
    openUserInfoPage() {
      //打开用户信息页面
      this.$router.push("/userInfo");
    },
    // 打开收藏页
    openCollect() {
      this.$router.push({ name: "Collect" });
    },
    // 打开收货地址页
    openAddress() {
      this.$router.push({
        name: "Contact",
        query: {
          isSwitch: false,
        },
      });
    },
    // 打开历史记录页
    openHistory() {
      this.$router.push({ name: "History" });
    },
  },
  async created() {
    const flag = checkUserInfo();
    if (flag) {
      console.log("过期了");
      this.$store.commit("clearInfo");
      this.$router.push({ name: "Login" });
    } else {
      const {
        data: { data },
      } = await getUserInfo();
      this.headImg = data.avatar;
      this.nickName = data.nickname;
      const res1 = await orderList({ showType: 0 });
      const res2 = await orderList({ showType: 1 });
      const res3 = await orderList({ showType: 2 });
      const res4 = await orderList({ showType: 3 });
      const res5 = await orderList({ showType: 4 });
      this.AllorderList = res1.data.data.list; //全部订单
      this.waitPayList = res2.data.data.list; //待支付订单
      this.waitSendList = res3.data.data.list; //待发货订单
      this.waitTakeGoods = res4.data.data.list; //待收货订单
      this.waitEval = res5.data.data.list; //待评价订单
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
#body-profile {
  background: #f2f2f2;
  min-height: 92.5vh;
}
.profile {
  width: 100%;
  // height: 70px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 20px;
  }
}
.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #f2f2f2;
  padding: 20px;
  .options-item {
    width: 100%;
    border-radius: 25px;
    overflow: hidden;
    // margin: 20px auto;
  }
}

.operation-list {
  width: 90%;
  margin: 0 auto;
  border-radius: 25px;
  overflow: hidden;
}
.van-cell {
  height: 50px;
  // line-height: 100px;
  align-items: center;
}
</style>

